import MyNavbar from "../../Share/MyNavbar";
import { Input, Button } from "antd-mobile";
import useWebsocket from "../../Share/useWebsocket";
import { useState } from "react";
import "./Message.css";
function Message() {
  useWebsocket("ws://localhost:8080");
  const [value, setValue] = useState("");
  const [xx, setXx] = useState<any[]>([]);
  const send = () => {
    setXx([...xx, value]);
    setValue("");
  };
  return (
    <div>
      <MyNavbar title="通知" />
      <div className="Message-box">
        <div className="Message-item1">
          {xx.map((item) => {
            return (
              <>
                <h3>{item}</h3>
              </>
            );
          })}
        </div>
        <div className="Message-item2">
          <Input
            className="Message-input"
            placeholder="请输入内容"
            value={value}
            onChange={(val) => {
              setValue(val);
            }}
          />
          <Button onClick={send} className="message-btn">
            发送
          </Button>
        </div>
      </div>
    </div>
  );
}

export default Message;
